<template>
  <base-button v-bind="$attrs" :debounce="300" @click="handleClick">
    <slot />
  </base-button>
</template>

<script setup lang="ts">
import service from '@/utils/http/service'
import { ElMessage } from 'element-plus'
// import { EitherOr } from './types'
// TODO 在封装form后再完成其主要功能
// 删除按钮
// 功能 在组件完成弹窗确定及删除的功能
// 需要 删除的API 接口 和 批量删除的参数
type ApiParams = {
  id: number
  ids: any[]
  [key: string]: any
}
interface IProps {
  apiUrl: string
  // apiParams: number | number[] | string | string[] | null
  apiParams: (object & { id: number }) | any[]
  apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'get' | 'post' | 'put' | 'delete'
}
const props = defineProps<IProps>()
const emits = defineEmits(['click'])
const handleClick = () => {
  let params: { id: number | null; ids: any[] } = {
    id: null,
    ids: [],
  }
  if (Array.isArray(props.apiParams)) {
    if (!props.apiParams.length)
      return ElMessage({
        message: '请至少选择一项!',
        type: 'warning',
        showClose: true,
      })
    props.apiParams.map((v) => {
      params.ids.push(v.id)
    })
  } else {
    params.id = props.apiParams.id
  }
  let url = props.apiUrl
  let method = props.apiMethod ? props.apiMethod : 'POST'
  service({ url, method, data: params })
    .then((res) => {
      // console.log('res', res)
      // 删除后刷新表格的方法放在下一个宏任务里面执行 处理点击删除按钮先刷新表格再删除的问题
      setTimeout(() => {
        emits('click', () => {
          ElMessage({
            message: '删除成功!',
            type: 'success',
            showClose: true,
          })
        })
      })
    })
    .catch((err) => {
      console.warn(err)
    })
}
</script>

<style scoped></style>
